<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../../jQuery-JS/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        /*
        需求：
        1.选中ul下所有的span
        2.选中ul下所有的子元素span
        3.选中class为box的下一个li
        4.选中ul下的class为box的元素后面的所有兄弟元素
        */

        //1.选中ul下所有的span
        $(function(){
            var $ul_span=$("ul span");
            $ul_span.css("background-color","red");
        })

        //2.选中ul下所有的子元素span
        $(function(){
            var $ul_sonspan=$("ul > span");
            $ul_sonspan.css("font-size","30px");
        })

        //3.选中class为box的下一个li
        $(function(){
            var $class_boxnextli=$(".box+li");
            $class_boxnextli.css("color","blue");
        })

        //4.选中ul下的class为box的元素后面的所有兄弟元素
        $(function(){
            var $ul_boxsiblings=$("ul .box~*");
            $ul_boxsiblings.css("text-decoration","underline");
        })
    </script>
</head>
<body>
    <!--
        层次选择器：查找子元素，后代元素，兄弟元素的选择器
        1.ancestor descendant
        在给定的祖先元素下匹配所有的后代元素
       
        2.parent > child
        在给定的父元素下匹配所有的子元素
        
        3.prev+next
        匹配所有紧接在prev元素后的next元素
        
        4.prev~siblings
        匹配prev元素后所有的siblings元素
    -->
    <ul>
        <li>AAAAA</li>
        <li class="box">ccccc</li>
        <li title="hello"><span>BBBBB</span></li>
        <li title="hello"><span>DDDD</span></li>
        <span>EEEEE</span>
    </ul>
</body>
</html>